<script setup lang="ts">
import type { ValidateMessages } from "ant-design-vue/lib/form/interface";
import { ref,type Ref, watch } from "vue";
import type { FormExpose } from "ant-design-vue/lib/form/Form";
const props = defineProps<{
  refFrom: Ref<FormExpose>
  labelCol?: number | string
}>()

const validateMessages = <ValidateMessages>{
  required: '${label}是必填项',
  whitespace: '${label}不能是空格',
  number: {
    len: '${label}最大位数为${len}',
    min: '${label}最小值为${min}',
    max: '${label}最小值为${max}',
    range: '${label}位于${min}到${max}之间',
  },
  string: {
    len: '${label}最大长度为${len}',
    min: '${label}最小长度为${min}',
    max: '${label}最大长度为${max}',
    range: '${label}长度${min}到${max}',
  },
  types: {
    number: '${value}不是一个有效的数字',
    integer: '${value}不是一个有效的整数',
    float: '${value}不是一个有效的小数',
    email: '${value}不是一个有效的邮箱',
    url: '${value}不是一个有效的网址',
    hex: '${value}不是一个有效的十六进制数'
  }
};
const form = <Ref<FormExpose>>ref<FormExpose>()
watch(() => props.refFrom, (v: Ref<FormExpose>) => {
  v && (props.refFrom.value = form.value)
}, { immediate: true })
</script>

<template>
  <a-form 
  ref="form"
  :="$attrs"
  :validate-messages="validateMessages"
    :labelCol="{ span: labelCol || 24 }">
    <slot></slot>
  </a-form>
</template>

<style scoped lang="less"></style>